<template>
  <div class="card-container" v-show="!loading">
    <el-card shadow="hover" v-for="item in list" :key="item.id" @click="goDetail(item.hoscode)">
      <div class="card">
        <div class="card-left">
          <p>{{ item.hosname }}</p>
          <div class="desc">
            <div class="desc-left">
              <SvgIcon name="dianzan" />
              <span>{{ item.param.hostypeString }}</span>
            </div>
            <div class="desc-right">
              <SvgIcon name="naozhong" />
              <span>每天{{ item.bookingRule?.releaseTime }}放号</span>
            </div>
          </div>
        </div>
        <div class="card-right">
          <img :src="`data:image/jpeg;base64,${item.logoData}`" width="50" height="50" alt="logo" />
        </div>
      </div>
    </el-card>
  </div>
  <!-- 骨架屏 -->
  <el-skeleton :rows="10" animated v-show="loading" />
  <el-empty description="数据飞走了，请稍后再试" v-if="list!.length === 0" />
</template>

<script setup lang="ts">
import { ref,inject } from 'vue'
import { Hospital } from '@/api/home/type'
import { useRouter } from 'vue-router'

const $router = useRouter()
// 开关控制加载效果
const loading = ref(inject<boolean>('loading'))
const list = ref(inject<Hospital[]>('hospList'))

// 跳转到详情页
const goDetail = (hosCode: string) => {
  $router.push({ path: '/hospital-detail', query: { hosCode } })
}
</script>

<style lang="scss" scoped>
.card-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 25px;
  ::v-deep(.el-card__body) {
    width: 435px;
  }
  .el-card {
    margin-bottom: 20px;
    cursor: pointer;
  }
  .card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .desc {
      width: 320px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      .desc-left, .desc-right {
        display: flex;
        span {
          margin-left: 5px;
        }
      }
    }
  }
}

</style>
